<template>
  <div ref="quill"></div>
</template>
<script>
export default {
  name: 'RichTextEditor',
  data() {
    return {
      uploading: false // 是否正在上传
    }
  },
  mounted() {
    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'], // 样式列表
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      [{ 'script': 'sub' }, { 'script': 'super' }],
      [{ 'indent': '-1' }, { 'indent': '+1' }],
      [{ 'direction': 'rtl' }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['clean'],
      ['image'] // 添加图片按钮
    ]
    const self = this;
    this.quill = new Quill(this.$refs.quill, {
      modules: {
        toolbar: {
          container: toolbarOptions,
          handlers: {
            // 处理插入图片的事件
            'image': function () {
              if (self.uploading) {
                return
              }
              const input = document.createElement('input')
              input.setAttribute('type', 'file')
              input.setAttribute('accept', 'image/*')
              input.addEventListener('change', function () {
                const file = input.files[0]
                if (!file) {
                  return
                }
                const formData = new FormData()
                formData.append(file.name, file)
                self.uploading = true
                // 这里需要将 formData 上传到服务器并获取图片 URL，然后在 success 回调中插入图片。
                // 下面是伪代码示例
                this.$http.post('/upload-image', formData).then(response => {
                  self.uploading = false
                  const url = response.data.url
                  const range = self.quill.getSelection()
                  // 在光标位置插入图片
                  self.quill.insertEmbed(range.index, 'image', url, Quill.sources.USER)
                  // 移动光标到插入的位置
                  self.quill.setSelection(range.index + 1, Quill.sources.SILENT)
                }).catch(error => {
                  console.error(error)
                  self.uploading = false
                  // 弹出错误提示
                })
              })
              input.click()
            }
          }
        }
      },
      theme: 'snow', // 主题样式
      placeholder: '请输入正文', // 占位符
      readOnly: false // 是否只读
    })
  },
  beforeDestroy() {
    this.quill.destroy();
  }
}
</script>